<template>
    <div>
        <x-table class="tableBox">
            <tr class="t_list_caption">
                <th :class="activeind == index ? 'active': ''" v-for="(item,index) in tabmenu" :key="index" @click="tabFun(index)">{{item}}</th>
            </tr>
        </x-table>
        <!-- 银行信息 -->
        <div v-if="activeind == 0">
            <x-table class="tableBox">
                <tr class="t_td_text">
                    <td class="caption_1">银行名称：</td>
                    <td style="text-align: left;padding: 7px 0px 7px 10px;"><input type="text" v-model="form.bank" placeholder="请输入银行名称" /></td>
                </tr>
                <tr class="t_td_text">
                    <td class="caption_1">银行卡号：</td>
                    <td style="text-align: left;padding: 7px 0px 7px 10px;"><input type="text" v-model="form.account" placeholder="请输入银行卡号" /></td>
                </tr>
                <tr class="t_td_text">
                    <td class="caption_1">卡主姓名：</td>
                    <td style="text-align: left;padding: 7px 0px 7px 10px;"><input type="text" v-model="form.name" placeholder="请输入卡主姓名" /><br/><span v-if="!form.name" style="font-size: 12px;color: red;">（设置后不能修改）</span></td>
                </tr>
                <tr class="t_td_text">
                    <td class="caption_1">手机号码：</td>
                    <td style="text-align: left;padding: 7px 0px 7px 10px;"><input type="text" v-model="form.phone" placeholder="请输入手机号码" /></td>
                </tr>
                <tr class="t_td_text">
                    <td class="caption_1">微信支付账号：</td>
                    <td style="text-align: left;padding: 7px 0px 7px 10px;"><input type="text" v-model="form.wx" placeholder="请输入微信账号" /><br/><span v-if="!form.wx" style="font-size: 12px;color: red;">（设置后不能修改）</span></td>
                </tr>
                <tr class="t_td_text">
                    <td class="caption_1">支付宝账号：</td>
                    <td style="text-align: left;padding: 7px 0px 7px 10px;"><input type="text" v-model="form.ali" placeholder="请输入支付宝账号" /><br/><span v-if="!form.ali" style="font-size: 12px;color: red;">（设置后不能修改）</span></td>
                </tr>
                <tr class="t_td_text">
                    <td class="caption_1">提现密码：</td>
                    <td style="text-align: left;padding: 7px 0px 7px 10px;">
                        <select v-if="!form.safe" style="margin-right: 3px;" v-for="(pass,ind) in safearr" :key="ind" v-model="safepas[ind]">
                            <option value="">{{pass}}</option>
                            <option v-for="(item,index) in passwordArr" :key="index" :value="item">{{item}}</option>
                        </select>
                        <a v-if="form.safe && !editpass" href="javascript:;" @click="editpass = true">修改密码</a>
                        <div v-if="editpass">
                            旧密码：<select style="margin-right: 3px;" v-for="(pass,ind) in safearr" :key="(ind+4)" v-model="jiusafepas[ind]">
                                <option value="">{{pass}}</option>
                                <option v-for="(item,index) in passwordArr" :key="index" :value="item">{{item}}</option>
                            </select><br/>
                             新密码：<select style="margin-right: 3px;" v-for="(pass,ind) in safearr" :key="(ind+8)" v-model="xinsafepas[ind]">
                                <option value="">{{pass}}</option>
                                <option v-for="(item,index) in passwordArr" :key="index" :value="item">{{item}}</option>
                            </select>
                        </div>
                    </td>
                </tr>
            </x-table>
            <div class="flexbox spacebetween operationbtn" style="width: 25%;margin: 30px auto 0px;">
                <input type="button" value="确认" @click="submitinfo" />
                <input type="button" value="取消" />
            </div>
        </div>
        <!-- 充值 -->
        <div v-if="activeind == 1">
            <div class="flexbox spacebetween margintop" style="margin: 10px;">
                <div>
                    <span>客服手机：{{rechargeInfo.phone}}</span>
                    <span style="padding-left: 20px;">客服QQ：{{rechargeInfo.qq}}</span>
                    <span style="padding-left: 20px;" v-if="rechargeRecord == true">状态：</span>
                    <select v-if="rechargeRecord == true" v-model="rechargeState" @change="changeState">
                        <option value="false">未处理</option>
                        <option value="true">已处理</option>
                    </select>
                </div>
                <a href="javascript:;" @click="rechargeRecord = true"  v-if="rechargeRecord == false">充值记录</a>
                <a href="javascript:;" @click="rechargeRecord = false"  v-if="rechargeRecord == true">返回</a>
            </div>
            <!-- 充值 -->
            <x-table class="tableBox" v-if="rechargeRecord == false">
                <tr class="t_list_caption">
                    <th>充值方式</th>
                    <th>收款人信息</th>
                </tr>
                <tr class="t_td_text">
                    <td>
                        <label class="recharge_type">
                            <input type="radio" name="recharge" value="1" v-model="rechargeForm.type" />
                            <img src="../../../../assets/images/WXPAY.png" />
                        </label>
                        <label class="recharge_type">
                            <input type="radio" name="recharge" value="2" v-model="rechargeForm.type" />
                            <img src="../../../../assets/images/alipay.jpg" />
                        </label>
                        <label class="recharge_type">
                            <input type="radio" name="recharge" value="3" v-model="rechargeForm.type" />
                            <img src="../../../../assets/images/unionpay.jpg" />
                        </label>
                    </td>
                    <td>
                        <a href="javascript:;" class="" @click="getcode" v-if="rechargeForm.type == 1 || rechargeForm.type == 2">如充值异常，请刷新二维码</a>
                        <div v-if="rechargeForm.type == 1">
                            <img :src="'/api/upload/QR/wx?uuid='+Authorization" @click="getcode" v-if="updates" style="width: 122px;height: 122px;" />
                        </div>
                        <div v-if="rechargeForm.type == 2">
                            <img :src="'/api/upload/QR/ali?uuid='+Authorization" @click="getcode" v-if="updates" style="width: 122px;height: 122px;" />
                        </div>
                        <ul style="padding: 0px 20px;" v-if="rechargeForm.type == 3">
                            <li v-for="(item,index) in rechargeInfo.banks" :key="index" style="margin-bottom: 10px;">
                                <p style="text-align: left;padding-bottom: 5px;font-size: 14px;">{{item.bank}}</p>
                                <p class="flexbox spacebetween">
                                    <span>卡号：{{item.account}}</span>
                                    <span>姓名：{{item.name}}</span>
                                </p>
                            </li>
                        </ul>
                    </td>
                </tr>
                <tr class="t_td_text">
                    <td style="font-size: 14px;"><span style="color: red;">*</span>充值金额：<input type="text" v-model="rechargeForm.Cash" placeholder="请输入金额" /></td>
                    <td style="padding: 10px;">
                        <div style="font-size: 14px;margin-bottom: 10px;"><span style="color: red;">*</span>备注：<br/><span style="font-size: 12px;">(付款账号,姓名等信息)</span></div>
                        <textarea placeholder="格式如：账号 123，张三" rows="3" v-model="rechargeForm.Remark" style="max-width: 100%;"></textarea>
                    </td>
                </tr>
            </x-table>

            <div class="flexbox spacebetween operationbtn" style="width: 25%;margin: 30px auto 0px;" v-if="rechargeRecord == false">
                <input type="button" value="确认" @click="submitrecharge" />
                <input type="button" value="取消" />
            </div>

            <!-- 充值记录 -->
            <x-table class="tableBox" v-if="rechargeRecord == true">
                <tr class="t_list_caption">
                    <th>充值方式</th>
                    <th>充值金额</th>
                    <th>状态</th>
                    <th>申请时间</th>
                </tr>
                <tr class="t_td_text" v-for="(item,index) in rechargeData.list" :key="index">
                    <td>{{item.cash_type == 1 ? '微信' : item.cash_type == 2? '支付宝' : '银行转账'}}</td>
                    <td>{{item.cash.toFixed(2)}}</td>
                    <td :style="item.deal ? 'color: #22bd1e' : 'color:red'">{{item.deal ? '已处理' : '未处理'}}</td>
                    <td>{{item.datetime}}</td>
                </tr>
            </x-table>
            <!-- 分页 -->
            <div v-if="rechargeRecord == true" style="text-align: center;margin-top: 15px;">
                <a href="javascript:;" @click="rechargePage(1)" style="font-size: 14px;" :style="rechargepage == 1 ? 'cursor: no-drop;':''">上一页</a>
                <a href="javascript:;" @click="rechargePage(2)" style="font-size: 14px;margin-left: 10px;" :style="rechargepage == rechargeData.pages ? 'cursor: no-drop;':''">下一页</a>
                <span style="font-size: 12px;margin-left: 20px;">
                    当前页码：
                    <em style="color: red;">{{rechargepage}}</em>
                    &nbsp;&nbsp;&nbsp;总数：
                    <em style="color: red;">{{rechargeData.total}}</em>条
                </span>
            </div>
        </div>
        <!-- 申请提现 -->
        <div v-if="activeind == 2">
            <p style="margin: 20px 10px 10px;">*当前可取余额：{{CashData.cash.toFixed(2)}}</p>
            <div class="flexbox spacebetween" style="margin: 10px;">
                <div>
                    <span style="font-size: 12px;">提现金额：</span>
                    <input type="text" placeholder="请输入金额" v-model="cashForm.cash" style="width: 100px;" />
                    <select v-model="cashForm.type">
                        <option value="1">微信</option>
                        <option value="2">支付宝</option>
                        <option value="3">银行卡</option>
                        <option value="4">现金</option>
                    </select><br/>
                    <span style="font-size: 12px;">提现密码：</span>
                    <input type="text" placeholder="请输入" v-model="cashForm.safe" style="width: 100px;" />
                    <input type="button" value="确定" @click="submitCash" />
                </div>
                <div>
                    <span style="font-size: 12px;">状态：</span>
                    <select v-model="rechargeState" @change="cashState">
                        <option value="false">未处理</option>
                        <option value="true">已处理</option>
                    </select>
                </div>
            </div>
            <!-- 充值记录 -->
            <x-table class="tableBox">
                <tr class="t_list_caption">
                    <th>提现方式</th>
                    <th>提现金额</th>
                    <th>状态</th>
                    <th>申请时间</th>
                </tr>
                <tr class="t_td_text" v-for="(item,index) in CashData.list" :key="index">
                    <td>{{item.cash_type == 1 ? '微信' : item.cash_type == 2? '支付宝' : item.cash_type == 3 ? '银行转账': '现金'}}</td>
                    <td>{{item.cash.toFixed(2)}}</td>
                    <td :style="item.deal ? 'color: #22bd1e' : 'color:red'">{{item.deal ? '已处理' : '未处理'}}</td>
                    <td>{{item.datetime}}</td>
                </tr>
            </x-table>
            <!-- 分页 -->
            <div style="text-align: center;margin-top: 15px;">
                <a href="javascript:;" @click="rechargePage(1)" style="font-size: 14px;" :style="rechargepage == 1 ? 'cursor: no-drop;':''">上一页</a>
                <a href="javascript:;" @click="rechargePage(2)" style="font-size: 14px;margin-left: 10px;" :style="rechargepage == CashData.pages ? 'cursor: no-drop;':''">下一页</a>
                <span style="font-size: 12px;margin-left: 20px;">
                    当前页码：
                    <em style="color: red;">{{rechargepage}}</em>
                    &nbsp;&nbsp;&nbsp;总数：
                    <em style="color: red;">{{CashData.total}}</em>条
                </span>
            </div>
        </div>
        <!-- 历史记录 -->
        <div v-if="activeind == 3">
            <div style="margin: 20px 0px 10px;">
                <span style="font-size: 12px;">筛选：</span>
                <select v-model="historyForm.type">
                    <option value="1,2">全部</option>
                    <option value="1">充值</option>
                    <option value="2">提现</option>
                </select><br/>
                <span style="font-size: 12px;display: inline-block;margin-top: 10px;">日期区间：</span>
                <input type="date" v-model="historyForm.start" />至
                <input type="date" v-model="historyForm.end" />
                <input type="button" value="查询" @click="submithistory" />
            </div>
            <!-- 历史记录 -->
            <x-table class="tableBox">
                <tr class="t_list_caption">
                    <th>方式</th>
                    <th>金额</th>
                    <th>余额</th>
                    <th>备注</th>
                    <th>时间</th>
                </tr>
                <tr class="t_td_text" v-for="(item,index) in historyData.list" :key="index">
                    <td>{{item.type == 1 ? '充值' : '提现'}}</td>
                    <td style="color: green">{{item.cash.toFixed(2)}}</td>
                    <td>{{item.current.toFixed(2)}}</td>
                    <td>{{item.remark}}</td>
                    <td>{{item.datetime}}</td>
                </tr>
            </x-table>
            <!-- 分页 -->
            <div style="text-align: center;margin-top: 15px;">
                <a href="javascript:;" @click="rechargePage(1)" style="font-size: 14px;" :style="rechargepage == 1 ? 'cursor: no-drop;':''">上一页</a>
                <a href="javascript:;" @click="rechargePage(2)" style="font-size: 14px;margin-left: 10px;" :style="rechargepage == historyData.pages ? 'cursor: no-drop;':''">下一页</a>
                <span style="font-size: 12px;margin-left: 20px;">
                    当前页码：
                    <em style="color: red;">{{rechargepage}}</em>
                    &nbsp;&nbsp;&nbsp;总数：
                    <em style="color: red;">{{historyData.total}}</em>条
                </span>
            </div>
        </div>
    </div>
</template>
<style scoped>
    .tableBox{
        background-color: #fff;
        text-align: center;
        width: 100%;
    }
    .tableBox th{
        background: #e2d4ca;
        border-bottom: 1px solid #c3b1a4;
        border-top: 1px solid #ebe1d9;
        font-size: 12px;
        line-height: 22px;
        font-weight: bold;
        cursor: pointer;
    }
    .tableBox tr{
        font-size: 12px;
        line-height: 22px;
    }
    .t_list_caption>td{
        cursor: pointer;
    }
    .t_list_caption>th.active{
        background: url(../../../../assets/images/t.jpg) repeat-x left top;
    }
    .numtit{
        font-weight: bold;
    }
    .recharge_type{
        display: block;
        margin: 10px;
    }
    .recharge_type>img{
        vertical-align: middle;
        border: 1px solid #dfdfdf;
    }
</style>
<script>

    import axios from 'axios'
    import {lotterytype} from '../../../../assets/js/lotterytype.js'
    import { XTable } from 'vux'

    export default {
        name: "FinancialManagement",
        props: {  //普通类型：String、Number、Boolean、Null    引用类型： Array、Object
            
        },
        components: {
            XTable
        },
        data(){
            return{
                infoData: {},
                activeind: 0,
                tabmenu: ['银行信息','充值','申请提现','历史记录'],
                form: {
                    bank: '',
                    account: '',
                    name: '',
                    phone: '',
                    wx: '',
                    ali: '',
                    safe: '',
                },
                passwordArr: [0,1,2,3,4,5,6,7,8,9],
                safearr: ['设','置','密','码'],
                safepas: ['','','',''],
                jiusafepas: ['','','',''],
                xinsafepas: ['','','',''],
                editpass: false,
                rechargeRecord: false,
                rechargeForm: {
                    type: 1,
                    Cash: '',
                    Remark: '',
                },
                Authorization: '',
                updates: true,
                rechargeInfo: {},
                rechargeState: false,
                rechargepage: 1,
                rechargeData: {},
                cashForm: {
                    cash: '',
                    safe: '',
                    type: 1,
                },
                CashData: {},
                historyForm: {
                    type: '1,2',
                    start: '',
                    end: '',
                },
                historyData: {},
            }
        },
        methods: {
            init(){

                //当前标题
                this.$emit('getTit','财务管理');

                var _this = this;
                _this.Authorization = window.localStorage.Authorizations;
                
                this.$httpGet('/api/cash/bank').then(response => {
                        
                    if(response.status == 200){
                        _this.form = response.data;
                    }

                });

                //默认日期  今天
                var date = new Date();
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                var day = date.getDate();
                if (month < 10) {
                    month = "0" + month;
                }
                if (day < 10) {
                    day = "0" + day;
                }
                var nowDate = year + "-" + month + "-" + day;
                this.historyForm.start = nowDate;
                this.historyForm.end = nowDate;

            },
            //切换tab
            tabFun(ind){
                var _this = this;
                _this.rechargepage = 1;
                _this.rechargeState = false;
                if(ind != 0 && !this.form.safe){
                    alert('抱歉，需要先设置提现密码，此项功能才开放');
                    return;
                }

                if(ind == 1){
                    this.paytypeFun();
                }else if(ind == 2){
                    this.cashList();
                }else if(ind == 3){
                    this.historyList();
                }

                this.activeind = ind;
            },
            //提交  银行信息
            submitinfo(){
                var _this = this;
                var obj = {};
                
                if(_this.form.safe){
                    //修改密码

                    if(_this.jiusafepas[0] == '' && _this.jiusafepas[1] == '' && _this.jiusafepas[2] == '' && _this.jiusafepas[3] == ''){
                        obj.oldSafe = '';
                        var nowpass = _this.form.safe;
                    }else{
                        
                            if(_this.jiusafepas[0] != '' && _this.jiusafepas[1] != '' && _this.jiusafepas[2] != '' && _this.jiusafepas[3] != ''){
                                obj.oldSafe = _this.jiusafepas.join('');
                                //旧密码
                                    if(_this.xinsafepas[0] == '' && _this.xinsafepas[1] == '' && _this.xinsafepas[2] == '' && _this.xinsafepas[3] == ''){
                                        alert('请输入新的四位提现密码后再提交');
                                        return;
                                    }else{
                                        //新密码
                                            if(_this.xinsafepas[0] != '' && _this.xinsafepas[1] != '' && _this.xinsafepas[2] != '' && _this.xinsafepas[3] != ''){
                                                
                                                var nowpass = _this.xinsafepas.join('');
                                            }else{
                                                alert('请输入新的四位提现密码后再提交');
                                                return;
                                            }
                                    }

                            }else{
                                alert('请输入旧的四位提现密码后再提交');
                                return;
                            }
                    }
                    
                }else{
                    //第一次设置  必须设置密码其他可为空
                    //校验密码是否为空
                    for(let i=0;i<_this.safepas.length;i++){
                        if(_this.safepas[i] == ''){
                            alert('请设置四位提现密码后再提交');
                            return;
                        }
                    }

                    var nowpass = _this.safepas.join('');
                }

                
                obj.bank = _this.form.bank ? _this.form.bank : '';
                obj.account = _this.form.account ? _this.form.account : '';
                obj.name = _this.form.name ? _this.form.name : '';
                obj.phone = _this.form.phone ? _this.form.phone : '';
                obj.wx = _this.form.wx ? _this.form.wx : '';
                obj.ali = _this.form.ali ? _this.form.ali : '';
                obj.cash_limit = _this.form.cash_limit;
                obj.recharge_limit = _this.form.recharge_limit;
                obj.times_limit = _this.form.times_limit;
                obj.qq = _this.form.qq ? _this.form.qq : '';
                obj.safe = nowpass;

                this.$httpPut('/api/cash/setBank', obj).then(response => {
                        
                    if(response.status == 200){
                        alert('保存成功');
                        _this.init();
                    }

                });
            },
            //提交 充值
            submitrecharge(){
                var _this = this;

                if(!_this.rechargeForm.Cash){
                    alert('请正确填写金额后在提交申请');
                    return;
                }
                if(!_this.rechargeForm.Remark){
                    alert('请填写备注');
                    return;
                }

                //充值
                this.$httpPost('/api/cash/preIn', {
                        type: _this.rechargeForm.type,
                        cash: _this.rechargeForm.Cash,
                        remark: _this.rechargeForm.Remark,
                    }).then(response => {
                        
                    if(response.status == 200){
                        alert(response.data.msg);
                    }

                });
            },
            //充值信息
            paytypeFun(){
                
                var _this = this;
                
                //获取银行跟客服信息
                this.$httpGet('/api/cash/payType').then(response => {
                        
                    if(response.status == 200){
                        _this.rechargeInfo = response.data;
                    }

                });
                
            },
            //更换验证码
            getcode(){
                
                this.updates = false;
                this.$nextTick(()=>{
                    this.updates = true;
                });
            },
            //change  充值记录状态筛选
            changeState(){
                //充值记录列表
                this.rechargeList();
            },
            //充值记录
            rechargeList(){
                var _this = this;
                
                //充值记录
                this.$httpGet('/api/cash/listPreIn',{
                        deal: _this.rechargeState,
                        page: _this.rechargepage,
                    }).then(response => {
                        
                    if(response.status == 200){
                        _this.rechargeData = response.data;
                    }

                });
            },
            //充值记录、提现记录  换页
            rechargePage(sign){
                
                if(sign == 1 && this.rechargepage != 1){  //上一页
                    
                    this.rechargepage--;
                    if(this.activeind == 1){  //充值
                        this.rechargeList();
                    }else if(this.activeind == 2){  //提现
                        this.cashList();
                    }
                    
                }else if(sign == 2 && this.rechargepage < this.rechargeData.pages){  //下一页
                    this.rechargepage++;
                    if(this.activeind == 1){  //充值
                        this.rechargeList();
                    }else if(this.activeind == 2){  //提现
                        this.cashList();
                    }
                }
                
            },
            // 提现记录
            cashList(){
                var _this = this;
                
                //提现记录
                this.$httpGet('/api/cash/listAsk',{
                        deal: _this.rechargeState,
                        page: _this.rechargepage,
                    }).then(response => {
                        
                    if(response.status == 200){
                        _this.CashData = response.data;
                    }

                });
            },
            //申请提现   更改状态查看记录
            cashState(){
                this.cashList();
            },
            //提交  申请提现
            submitCash(){
                var _this = this;
                if(!this.cashForm.cash){
                    alert('请填写金额后再提交申请');
                    return;
                }
                if(!this.cashForm.safe){
                    alert('请填写密码后再提交申请');
                    return;
                }

                this.$httpPost('/api/cash/ask', {
                        type: _this.cashForm.type,
                        cash: _this.cashForm.cash,
                        safe: _this.cashForm.safe,
                    }).then(response => {
                        
                    if(response.status == 200){
                        alert(response.data.msg);
                        _this.cashList();
                    }

                });
            },
            //查询历史记录
            submithistory(){
                this.historyList();
            },
            //历史记录
            historyList(){
                var _this = this;

                this.$httpGet('/api/cash/history/0',{
                        type: _this.historyForm.type,
                        start: _this.historyForm.start,
                        end: _this.historyForm.end,
                        page: _this.rechargepage,
                    }).then(response => {
                        
                    if(response.status == 200){
                        _this.historyData = response.data;
                    }

                });
            },
        },
        mounted(){
            this.init();
        },
        watch: {
            rechargeRecord: function(now,old){
                //充值记录列表
                this.rechargeList();
            },
            openBet: function(now,old){
                // console.log(now,old);
                //开奖  刷新路珠数据
                this.init();
                
            },
            ninetime: function(now,old){
                console.log('------------90s  账户信息');
                //90s  刷新数据
                this.init();
            },

        },
    }
</script>
